// The Stack layout injects margin between elements via their common parent.
// The amount of margin can be configured using the --flow-space variable:

// <div class="stack flow-space-300">
//   <div>child</div>
//   <div>child</div>
//   <div>etc.</div>
// </div>

// https://every-layout.dev/layouts/stack/

%stack,
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  // Ensure flex children do not break out of max-width/width containers.
  min-width: 0;
  
  > * {
    margin-bottom: 0;
    margin-top: 0;
  } 
  
  > * + * {
    margin-top: var(--flow-space);
  }
}

// The default .stack class uses flexbox, and flexbox ignores floats.
// Authors like to use floats in blog posts and docs so this exception can be
// used on those stacks to enable floats.
.stack--block {
  display: block;
}

// Use the stack-exception class to change the top AND bottom margin
// around an individual element.
// These exceptions follow the rest of our size scale.
// .stack-exception-700 === margin-top 3rem
@each $size, $value in $gorko-size-scale {
  .stack-exception-#{$size},
  .stack-exception-#{$size} + * {
    margin-top: $value;
  }
}

// A recursive stack is a more powerful/dangerous selector as it will
// keep injecting margin regardless of the nesting level.
// For the majority of use cases you'll probably want to use the regular .stack
// class. But for situations like the native-client docs, which are machine
// generated, it's helpful being able to affect all of the white space with
// a single class.
// https://every-layout.dev/layouts/stack/#recursion
.stack-recursive * + * {
  margin-top: var(--flow-space);
}
